// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

TwoRectangle := Rectangle {

    callback clicked;

    Rectangle {
        x: 50phx;
        y: 50.0phx;
        width: 25phx;
        height: 25phx;
        background: red;

        my_area := TouchArea {
            width: 25phx;
            height: 25phx;
            clicked => { root.clicked() }
        }
    }
}

ButtonRectangle := Rectangle {
    property<string> button_text;
    callback clicked;
    width: 100phx;
    height: 75phx;

    inner := Rectangle {
        background: { area.pressed ? green : root.background };
        animate background { duration: 500ms; }
        area := TouchArea {
            width: inner.width;
            height: inner.height;
            clicked => { root.clicked() }
        }
        Text {
            animate x { duration: 500ms; }
            animate y { duration: 500ms; }
            x: { area.pressed ? 60phx : 50phx; }
            y: { area.pressed ? 20phx : 10phx; }
            text: button_text;
            width: root.width;
            height: root.height;
            horizontal-alignment: left;
            vertical-alignment: center;
        }
        animate x { duration: 500ms; }
        animate y { duration: 500ms; }
        animate width { duration: 500ms; }
        animate height { duration: 500ms; }
        x: { area.pressed ? 0phx-10phx : 0phx }
        y: { area.pressed ? 0phx-10phx : 0phx; }
        width: { area.pressed ? (root.width + 20phx) : root.width; }
        height: { area.pressed ? (root.height + 20phx) : root.height; }
    }
}

Hello := Rectangle {

    callback foobar;
    callback plus_clicked;
    callback minus_clicked;

    background: white;

    TwoRectangle {
        width: 100phx;
        height: 100phx;
        background: blue;
        clicked => { foobar() }
    }
    Rectangle {
        x: 100phx;
        y: 100phx;
        width: (100phx);
        height: {100phx}
        background: green;
        Rectangle {
            x: 50phx;
            y: 50.0phx;
            width: 25phx;
            height: 25phx;
            background: yellow;
        }
    }
    Image {
        x: 200phx;
        y: 200phx;
        source: @image-url("../../../examples/memory/icons/tile_logo.png");
    }

    ButtonRectangle {
        background: #888;
        x: 50phx;
        y: 225phx;
        clicked => { counter += 1 }
        button_text: "+";
    }
    property<int> counter;
    counter_label := Text { x: 100phx; y: 300phx; text: counter; color: black; }
    ButtonRectangle {
        background: #888;
        x: 50phx;
        y: 350phx;
        clicked => { minus_clicked() }
        button_text: "-";
    }

     Path {
        x: 100phx;
        y: 300phx;
        fill: green;
        stroke: black;
        stroke_width: 2px;

        MoveTo {
            x: 0;
            y: 0;
        }

        LineTo {
            x: 100;
            y: 50;
        }
        LineTo {
            x: 0;
            y: 100;
        }

        ArcTo {
            x: 0;
            y: 0;
            radius_x: 10;
            radius_y: 10;
        }

//        M 0 0 C 15.3333 3.6667 92 1 48 46 Q -25 54 0 0
        CubicTo {
            x: 48;
            y: 46;
            control-1-x: 15;
            control-1-y: 3;
            control-2-x: 92;
            control-2-y: 1;
        }

        QuadraticTo {
            x: 0;
            y: 0;
            control-x: -25;
            control-y: 54;
        }

        Close {}
    }

    Path {
        commands: ta.pressed ? root.arrow_down_commands : root.funky-shape-commands;
        x: 100phx;
        y: 500phx;
        stroke: black;
        stroke_width: 2px;
    }

    ta := TouchArea {

    }

    property <string> arrow_down_commands: "M21.8,311.1l84.2-82.1c15.7-15.2,41-15.2,56.7,0l341.1,304.1l333.7-297.5c15.5-15.2,41-15.2,56.6,0l84.3,82.1c15.6,15.2,15.6,40,0,55.2L531.7,771c-15.7,15.3-41,15.3-56.7,0l-6.9-6.7L21.8,366.3C6.1,351,6.1,326.3,21.8,311.1z";
    property <string> funky_shape_commands: "M 100 300 Q 150 50 250 150 C 250 300 300 300 300 450 A 50 50 0 1 0 450 450 L 550 300";
    property <length> width2 <=> root.width;
}

/*

```cpp
auto handle = Hello::create();
const Hello &instance = *handle;
assert(!instance.window().is_visible());
instance.window().show();
assert(instance.window().is_visible());
assert(instance.get_width2() > 0); // default size from the backend
instance.window().set_size(slint::LogicalSize({123., 456.}));
assert_eq(instance.get_width2(), 123.);
instance.window().hide();
assert(!instance.window().is_visible());
```


```rust
let instance = Hello::new().unwrap();
assert!(!instance.window().is_visible());
instance.window().show().unwrap();
assert!(instance.window().is_visible());
assert!(instance.get_width2() > 0.); // default size from the backend
instance.window().set_size(slint::LogicalSize::new(123., 456.));
assert_eq!(instance.get_width2(), 123.);
instance.window().hide().unwrap();
assert!(!instance.window().is_visible());
```

```js
var instance = new slint.Hello();
assert(!instance.window.visible);
instance.window.show();
assert(instance.window.visible);
instance.window.hide();
assert(!instance.window.visible);
```

*/
